

function Painter(ctx){
    var context = ctx;
    var center = {};
        
    var init = function(){    
        center[0] = context.canvas.width/2;
        center[1] = context.canvas.height/2;
    };
            
    this.pushState = function(){
        context.save();
    };
    
    this.popState = function(){
        context.restore();
    };
        
    this.setFillColor = function(r,g,b,a){
        context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a +")";
    };
    
    this.drawText = function(text, ypos){        
        context.save();
        context.font = "30px Arial";
        context.textAlign = "center";
        context.fillText(text, center[0], ypos);
        context.restore();              
    };
    
    
    init();
}



function main(){
    var context = document.getElementById('myCanvas').getContext('2d');
    
    var painter = new Painter(context);

    /* your exercise here: demonstrate effects of state stacking  */    
    
}

